<template>
  <header class="sticky top-0 z-40 bg-white/90 bg-blur shadow-sm transition-all duration-300">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- Logo -->
        <router-link to="/" class="flex items-center">
          <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
            <i class="fa fa-paper-plane text-white"></i>
          </div>
          <span class="text-xl font-bold text-dark">环球旅行指南</span>
        </router-link>
        
        <!-- 桌面导航 -->
        <nav class="hidden md:flex items-center space-x-8">
          <router-link 
            to="/" 
            class="text-gray-700 hover:text-primary transition-colors font-medium"
            :class="{ 'text-primary': $route.name === 'home' }"
          >
            首页
          </router-link>
          <router-link 
            to="/search" 
            class="text-gray-700 hover:text-primary transition-colors font-medium"
            @click="setSearchQuery('')"
            :class="{ 'text-primary': $route.name === 'search' }"
          >
            城市
          </router-link>
          <router-link 
            to="/favorites" 
            class="text-gray-700 hover:text-primary transition-colors font-medium relative"
            :class="{ 'text-primary': $route.name === 'favorites' }"
          >
            收藏
            <span 
              v-if="favoritesCount > 0" 
              class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"
            >
              {{ favoritesCount }}
            </span>
          </router-link>
          <router-link 
            to="/contact" 
            class="text-gray-700 hover:text-primary transition-colors font-medium"
            :class="{ 'text-primary': $route.name === 'contact' }"
          >
            联系我们
          </router-link>
        </nav>
        
        <!-- 搜索框 -->
        <div class="relative flex-1 max-w-md mx-4 hidden md:block">
          <input 
            type="text" 
            placeholder="搜索城市..." 
            class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
            v-model="searchQuery"
            @input="handleSearch"
          >
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <button 
          class="md:hidden text-gray-700 hover:text-primary"
          @click="toggleMobileMenu"
        >
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div 
      class="md:hidden bg-white border-t border-gray-100 shadow-lg"
      :class="{ 'max-h-96 overflow-y-auto': mobileMenuOpen, 'max-h-0 overflow-hidden': !mobileMenuOpen }"
      transition:height="300ms"
    >
      <div class="container mx-auto px-4 py-4">
        <!-- 移动端搜索框 -->
        <div class="relative mb-4">
          <input 
            type="text" 
            placeholder="搜索城市..." 
            class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
            v-model="searchQuery"
            @input="handleSearch"
          >
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
        
        <!-- 移动端导航链接 -->
        <nav class="flex flex-col space-y-4">
          <router-link 
            to="/" 
            class="text-gray-700 hover:text-primary transition-colors font-medium py-2"
            @click="toggleMobileMenu"
            :class="{ 'text-primary': $route.name === 'home' }"
          >
            首页
          </router-link>
          <router-link 
            to="/search" 
            class="text-gray-700 hover:text-primary transition-colors font-medium py-2"
            @click="() => { setSearchQuery(''); toggleMobileMenu(); }"
            :class="{ 'text-primary': $route.name === 'search' }"
          >
            城市
          </router-link>
          <router-link 
            to="/favorites" 
            class="text-gray-700 hover:text-primary transition-colors font-medium py-2 relative"
            @click="toggleMobileMenu"
            :class="{ 'text-primary': $route.name === 'favorites' }"
          >
            收藏
            <span 
              v-if="favoritesCount > 0" 
              class="absolute -top-1 -right-2 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"
            >
              {{ favoritesCount }}
            </span>
          </router-link>
          <router-link 
            to="/contact" 
            class="text-gray-700 hover:text-primary transition-colors font-medium py-2"
            @click="toggleMobileMenu"
            :class="{ 'text-primary': $route.name === 'contact' }"
          >
            联系我们
          </router-link>
        </nav>
      </div>
    </div>
  </header>
</template>

<script>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';

export default {
  props: {
    searchQuery: {
      type: String,
      default: ''
    }
  },
  emits: ['search'],
  
  setup(props, { emit }) {
    const store = useStore();
    
    // 移动端菜单状态
    const mobileMenuOpen = ref(false);
    
    // 获取收藏数量
    const favoritesCount = computed(() => store.getters.favoriteCities.length);
    
    // 切换移动端菜单
    const toggleMobileMenu = () => {
      mobileMenuOpen.value = !mobileMenuOpen.value;
    };
    
    // 处理搜索
    const handleSearch = (e) => {
      emit('search', e.target.value);
    };
    
    // 设置搜索查询
    const setSearchQuery = (query) => {
      store.dispatch('setSearchQuery', query);
    };
    
    return {
      mobileMenuOpen,
      toggleMobileMenu,
      favoritesCount,
      handleSearch,
      setSearchQuery
    };
  }
};
</script>

<style scoped>
header {
  transition: all 0.3s ease;
}

header.scrolled {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
</style>
